{% extends "base.html" %}
{% load i18n %}
{% load staticfiles %}
{% load filter %}

{% block title %}Scheduler{% endblock %}

{% block content %}
    <div class="tabbable"> <!-- Only required for left/right tabs -->
        <ul class="nav nav-tabs">
        {% if timetables %}
            {% for timetable in timetables %}
                <li {% if forloop.first and not addTimetable_active %}class="active"{% endif %}><a title="{{ timetable.tt_description }}" style="outline: none;" href="#tab{{ forloop.counter }}" data-toggle="tab">{{ timetable.tt_name }}</a></li>
            {% endfor %}
                <li {% if addTimetable_active %}class="active"{% endif %}><a style="outline: none;" href="#no_scheduler" data-toggle="tab"><i class="icon-plus"></i></a></li>
            </ul>
            <div class="tab-content">
                {% for timetable in timetables %}

                    <div class="tab-pane {% if forloop.first and not addTimetable_active %}active{% endif %}" id="tab{{ forloop.counter }}">
                        <!--<div  id="description">
                            {{ timetable.tt_description }}
                        </div><!--description-->
                        <div id="timetable">
                            <div id="timetable_header">
                                <div id="extras">
                                    <a title="Reload your timetable." href="/account/timetables"><i class="icon-refresh"></i></a>
                                    <a title="Print the current timetable." style="cursor:pointer;" onClick="window.print()"><i class="icon-print"></i></a>
                                    <a title="Delete the current timetable." href="/deleteTimetable/?id={{ timetable.pk }}"><i class="icon-trash"></i></a>
                                </div><!--extras-->

                                <div id="date">
                                    <h2><small>{{ cal_current_day }} | {{ cal_current_month_written }} </small>{{ cal_current_year }}</h2>
                                </div><!--date-->

                            </div><!--timetable_header-->
                            <div class="clear"></div><!--clear-->


                            <div id="content">
                                {% for current_day in week %}
                                    <div {% if current_day = cal_current_weekday %}class="current_day"{% endif %} id="{{ current_day }}" onmouseover="addLessonHover('{{ current_day }}')" onmouseout="addLessonOut('{{ current_day }}')"><h5><small>{{ weekDaysName|get_item:current_day }}</small></h5>
                                    {% for weekId, days in weeks.items %}
                                        {% if weekId = timetable.id %}
                                            {% for day in days %}
                                                {% if day.0.0 = current_day %}
                                                    {% for subject in day.1 %}
                                                        {% for lesson in subject.1 %}
                                                            <div class="lesson_container" id="t{{ timetable.id }}_s{{ subject.0.id }}_l{{ lesson.id }}" onmouseover="lessonHover('t{{ timetable.id }}_s{{ subject.0.id }}_l{{ lesson.id }}')" onmouseout="lessonOut('t{{ timetable.id }}_s{{ subject.0.id }}_l{{ lesson.id }}')" style="background-color:{{ subject.0.sub_color }}; border-radius: 8px 8px 8px 8px; ">
                                                                <div id="extras_lesson">
                                                                    <a style="display:none;" title="Edit the current lesson." onclick="editLesson('{{ lesson.pk }}')"><i class="icon-pencil"></i></a>
                                                                    <a style="display:none;" title="Delete the current lesson." href="/deleteLesson/?id={{ lesson.pk }}"><i class="icon-trash"></i></a>
                                                                </div><!--extras_lesson-->

                                                                <div id="lesson_content">
                                                                    {{ subject.0.sub_name }} <br/>
                                                                    {{ lesson.les_location }} <br/>
                                                                    {{ subject.0.sub_professor }}
                                                                    <!--{{ subject.0.sub_color }}
                                                                    {{ lesson.les_day }}--><br/>
                                                                    {{ lesson.les_starttime }} - {{ lesson.les_endtime }}
                                                                </div><!--lesson_content-->

                                                            </div><!--lesson_container-->
                                                        {% endfor %}
                                                    {% endfor %}
                                                {% endif %}
                                            {% endfor %}
                                        {% endif %}
                                    {% endfor %}
                                    <div style="position:relative; height: 100%;" onclick="addLessonClick('{{ current_day }}', '{{ timetable.id }}')" id="day_hover"></div>
                                    </div><!--monday-->
                                {% endfor %}
                            </div><!--content-->

                            <!-- Modal - addLesson -->
                            <div id="add_lesson{{timetable.id}}" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                    <h3 class="header">Add lesson<small id="modal_small{{timetable.id}}"></small></h3>
                                </div>
                                <div class="modal-body">
                                    {% include "addSubjectLesson.html" %}
                                </div>
                                <div class="modal-footer">
                                    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                                    <button id="add_SubjectLesson{{timetable.id}}" class="btn btn-primary">{% trans "ADD" %}</button>
                                </div>
                            </div>

                            <!-- Modal - editLesson -->
                            <div id="edit_lesson" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                    <h3 class="header" id="myModalLabel">Edit lesson<small id="modal_small"></small></h3>
                                </div>
                                <div class="modal-body">
                                    coming soon...
                                </div>
                                <div class="modal-footer">
                                    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                                    <button class="btn btn-primary">{% trans "EDIT" %}</button>
                                </div>
                            </div>

                        </div><!--timetable-->
                    </div>
                {% endfor %}

                <div class="tab-pane {% if addTimetable_active %}active{% endif %}" id="no_scheduler">
                   {% include "addTimetable.html" %}

                </div>
            </div>
        {% else %}
            <li class="active"><a style="outline: none;" href="#no_scheduler_2" data-toggle="tab"><i class="icon-plus"></i></a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="no_scheduler_2">
                    <p>create your scheduler!!</p>
                    {% include "addTimetable.html" %}

                </div>
            </div>
        {% endif %}

    </div>



{% endblock %}